<template>
	<div class="wrapper">
		<swiper :options="swiperOption" v-if="showSwiper">
			<!-- slides -->
			<swiper-slide v-for="item of list" v-bind:key="item.id">
				<img class="swiper-img" v-bind:src="item.imgUrl" alt="">
			</swiper-slide>
			<div class="swiper-pagination"  slot="pagination"></div>
		</swiper>	
	</div>
</template>
<script>
export default{
	name: 'HomeSwiper',
	props:{
		list:Array
	},
	data:function() {
		return {
			swiperOption:{
				pagination: '.swiper-pagination',
				loop:true,
			},
		}
	},
	computed: {
		showSwiper () {
			return this.list.length
		}
	}
}	

</script>
<style lang="stylus" scoped>
//>>>不受scoped限制
.wrapper >>> .swiper-pagination-bullet-active {background: #fff!important;}
.wrapper{overflow:hidden;width:100%;height:0;padding-bottom:26.66%}
.swiper-img{width:100%;}
</style>